<style>
    *{
        padding: 0;
        margin: 0;
    }
    body{
        background-color: black;
    }
    div{
        position: absolute;
        width: 100px;
        height: 30px;
        background-color: white;
    }
    
</style>
<body>
    <div>
        <div class="xuetiao" style=" background-color: red;
        position: relative;
        width: 100px;
        height: 30px;"></div>
    </div>
</body>
<script>
//需求:每隔3s造出一个星星img标签追力
// 1写定时器setInterval一直计时 setTimeOut 仅一次
setInterval(function(){
// 2定时器函数中:造星星追加到页面(位
// 2.1造星星
var imgObj = document.createElement('img')
imgObj.src='./star.gif'
// 2.2随机:宽度高度
var min =20
var max=40
imgObj.width=Math.floor(Math.random()*(max-min+1)+min)
// 2.3随机:位置
var leftMin=0
var leftMax=(window.innerWidth||document.documentElement.clientWidth)-imgObj.width
var left = Math.floor(Math.random()*(leftMax-leftMin+1)+leftMin)
var topMin=0
var topMax=(window.innerHeight||document.documentElement.clientHeight)-imgObj.width//屏幕高度减去星星的高度
var top = Math.floor(Math.random()*(topMax-topMin+1)+topMin)
imgObj.style.position='absolute'
imgObj.style.left=left+'px'
imgObj.style.top=top+'px'
// 2.4追加到页面
document.body.appendChild(imgObj)

// 血条削减
var xuetiao = parseInt(document.querySelector('.xuetiao').style.width)
document.querySelector('.xuetiao').style.width=xuetiao-1+'px'
},1000)

//二、点击删除星星
// 1获取body并且绑定点击事件
document.body.onclick=function(evt){
// 2事件处理函数中:删除星星 获取父标签body. removeChild(当前点击星星)
// 2.1获取事件对象
var e = evt||window.Event
// 2.2 获取操作的标签
var target=e.target||e.srcElement
// 2.3移出
if(target.nodeName==='IMG'){
    this.removeChild(target)
    var xuetiao = parseInt(document.querySelector('.xuetiao').style.width)
    document.querySelector('.xuetiao').style.width=xuetiao+1+'px'
}
}

</script>